<template>
    <div>
        <el-row style="margin-top: 20px" type="flex" align="middle">
            <el-col :span="3">
                <el-row>
                    <el-button type="primary" class="buttonSize"
                               :disabled="workOnShow"
                               @click="workCard">上班打卡
                    </el-button>
                </el-row>
            </el-col>
            <el-col :span="6" :v-show="workOnShow">
                <el-time-select v-model="workOnTime" disabled size="small">

                </el-time-select>
            </el-col>
            <el-col :span="3" :v-show="workOnShow">
                <el-button type="primary" :disabled="workOffShow" class="buttonSize"
                           @click="workOffCard">下班打卡
                </el-button>
            </el-col>
            <el-col :span="6" v-show="workOffShow">
                <el-time-select v-model="workOffTime" disabled size="small">

                </el-time-select>
            </el-col>
            <el-col :span="6" v-show="workOffShow">
                <span>今日工作时长：</span>
                <span>{{workHour}}</span>
                <span>小时</span>
                <span>{{workMinutes}}</span>
                <span>分</span>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="3">
                <el-row style="margin-top: 20px">
                    <router-link to="/front/staffWork/checkSalary">
                        <el-button type="primary" class="buttonSize">查看工资
                        </el-button>
                    </router-link>

                </el-row>
                <el-row style="margin-top: 20px">
                    <router-link to="/front/staffWork/checkWorkArrange">
                        <el-button type="primary" class="buttonSize">查看排班
                        </el-button>
                    </router-link>

                </el-row>
                <el-row style="margin-top: 20px">
                    <router-link to="/front/staffWork/checkAttendance">
                        <el-button type="primary" class="buttonSize">查看考勤
                        </el-button>
                    </router-link>

                </el-row>

            </el-col>
            <el-col :span="21">
                <el-row style="margin-top: 20px">
                    <router-view>
                    </router-view>

                </el-row>
            </el-col>
        </el-row>
        <!--<paging :obj="pagingData"></paging>-->
    </div>
</template>

<script>
    import {mapActions} from 'vuex'

    export default {

        name: "employeesWorkPage",
        computed: {

            workOnTime() {
                return this.$store.state.workPageStore.workOnTime;
            },
            workOffTime() {
                return this.$store.state.workPageStore.workOffTime;
            },
            workHour() {
                return this.$store.state.workPageStore.workHour;
            },
            workMinutes() {
                return this.$store.state.workPageStore.workMinutes;
            },
            workOnShow(){
                return Boolean(this.$store.state.workPageStore.workOnTime);
            },
            workOffShow(){
                return Boolean(this.$store.state.workPageStore.workOffTime);
            },

        },
        data() {
            return {
                currentPage: 1,

            }

        },
        created() {
            this.getWorkState();

        },
        mounted(){

        },
        methods: {
            ...mapActions(['getWorkStatetAct', 'getWorkOnTimeAct', 'getWorkOffTimeAct']),
            workCard() {
                this.getWorkOnTime();

            },
            workOffCard() {
                this.getWorkOffTime();
                this.showWorkOffCard = !this.showWorkOffCard;
            },
            /*上班打卡*/
            getWorkOnTime() {
                let obj = {
                    staffId: this.$store.state.user.userId,
                    // staffId: 1,
                    goToTime: this.getNowTime()
                }
                this.getWorkOnTimeAct(obj).then(resp => {
                    console.log(resp);
                    if (resp.Code === 200) {
                        this.checkSuccessMessage()
                    }
                }).catch(err => {
                    console.log(err);
                })
            },
            /*下班打卡*/
            getWorkOffTime() {
                let obj = {
                    staffId: this.$store.state.user.userId,
                    // staffId: 1,
                    goOffTime: this.getNowTime()
                }
                this.getWorkOffTimeAct(obj).then(resp => {
                    console.log(resp);
                    if (resp.Code === 200) {
                        this.checkSuccessMessage()
                    }
                }).catch(err => {
                    console.log(err);
                })
            },
            /*打卡成功消息*/
            checkSuccessMessage() {
                this.$message({
                    message: '打卡成功',
                    type: 'success',
                    center: true,
                })
            },
            /*获取当前时间*/
            getNowTime() {
                let date = new Date();
                // console.log(date);
                let yy = date.getFullYear();
                let mm = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
                let dd = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
                let hh = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
                let mf = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
                let ss = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
                let time = yy + '-' + mm + '-' + dd + '  ' + hh + ':' + mf + ':' + ss;
                return {time, date}
            },
            /*获取员工打卡状态*/
            getWorkState() {
                // console.log(this.getNowTime());
                let obj = {
                    staffId: this.$store.state.user.userId,
                    // staffId: 1,
                    attendanceDay: this.getNowTime().time.split(' ')[0]
                }
                console.log(obj);
                this.getWorkStatetAct(obj).then(resp => {
                    // console.log(resp);
                    if (resp.Code === 200) {

                        console.log(this.$store.state.workPageStore.workOffDate);
                    }
                }).catch(err => {
                    console.log(err);
                })
            },
        }

    }
</script>

<style scoped>


    .buttonSize {
        height: 30px;
        width: 100px;
        padding: 0;
    }
</style>